﻿<DemoPageSectionComponent Id="DataGrid-Selection-Multiple" ShowHorizontalScrollBar="true">
    @inject NwindDataService NwindDataService

    @if(Products == null) {
        <p><em>Loading...</em></p>
    } else {
        <div class="d-flex flex-wrap w-100">
            <DxDataGrid Data="@Products"
                        SelectionMode="DataGridSelectionMode.MultipleSelectedDataRows"
                        @bind-MultipleSelectedDataRows="@SelectedProducts"
                        KeyFieldName="@nameof(Product.ProductId)"
                        CssClass="w-auto mt-1 me-1 flex-grow-1" style="flex-basis: 700px">
                <DxDataGridColumn Field="@nameof(Product.ProductName)" />
                <DxDataGridComboBoxColumn Field="@nameof(Product.CategoryId)" Caption="Category"
                                          Data="@Categories" TextFieldName="@nameof(Category.CategoryName)" ValueFieldName="@nameof(Category.CategoryId)" />
                <DxDataGridSpinEditColumn Field="@nameof(Product.UnitPrice)" DisplayFormat="c" Width="120px" />
                <DxDataGridSpinEditColumn Field="@nameof(Product.UnitsInStock)" Width="150px" />
            </DxDataGrid>
            <div class="card mt-1 me-1 flex-grow-1 max-h-420" style="flex-basis: 280px">
                <div class="card-header bg-transparent text-body py-2 border-bottom-0 fw-bold">Selected products:</div>
                <div class="card-body p-0 pb-2 overflow-auto">
                    <ul class="list-group list-group-flush bg-transparent border-0">
                        @foreach(var product in SelectedProducts) {
                            <li class="list-group-item bg-transparent text-body py-1 border-0">@product.ProductName</li>
                        }
                    </ul>
                </div>
            </div>
        </div>
    }

    @code {
        IEnumerable<Product> Products { get; set; }
        IEnumerable<Category> Categories { get; set; }

        IEnumerable<Product> selectedProducts;
        IEnumerable<Product> SelectedProducts {
            get { return selectedProducts; }
            set {
                selectedProducts = value;
                InvokeAsync(StateHasChanged);
            }
        }

        protected override async Task OnInitializedAsync() {
            Products = await NwindDataService.GetProductsAsync();
            Categories = await NwindDataService.GetCategoriesAsync();
            SelectedProducts = Products.Take(4).AsEnumerable();
        }
    }
</DemoPageSectionComponent>
